<template>
  <div id="app" v-bind:style="appDivStyle">
    <div class="context" ref="context">
      <div class="queryBox" ref="queryBox">
        <el-form :model="formQueryCondition" ref="form" size="mini">
          <el-row>
            <!-- 站点名称 -->
            <el-col :span="5">
              <el-form-item :label="$t('queryLabel.sit.sitName')" :label-width="queryformLabelWidth">
                <el-input v-model.trim="formQueryCondition.siteName.val" class="queryItemStyle" clearable
                          :placeholder="$t('queryLabel.sit.placeholderSitName')">
                </el-input>
              </el-form-item>
            </el-col>
            <!-- 站点编码 -->
            <el-col :span="5" :offset="1">
              <el-form-item :label="$t('queryLabel.sit.sitCode')" :label-width="queryformLabelWidth">
                <el-input v-model.trim="formQueryCondition.siteCode.val" class="queryItemStyle" clearable
                          :placeholder="$t('queryLabel.sit.placeholderSitCode')">
                </el-input>
              </el-form-item>
            </el-col>
            <!-- 状态 -->
            <el-col :span="5" :offset="1">
              <el-form-item :label="$t('Dictionary.queryLabel.status')"  :label-width="queryformLabelWidth">
                  <el-select v-model="formQueryCondition.isEnable.val" class="queryItemStyle">
                      <el-option :label="$t('label.all')" value=""></el-option>
                      <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText"
                          v-for="drug in enables"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 按钮上的按钮 -->
          <el-row>
            <el-col :span="24">
              <div style="text-align:right">
                  <el-form-item>
                    <!-- 新增 -->
                    <el-button v-permission="{menuCode: menuCode, resourceCode: 'saveBtnText'}" type="primary" @click="onNew('saveBtnText')">{{ $t('btnText.newBtnText') }}</el-button>
                  <!-- </el-form-item> -->
                <!-- <el-form-item> -->
                  <!-- 重置 -->
                <el-button v-permission="{menuCode: menuCode, resourceCode: 'resetBtnText'}" type="primary" @click="onReset('form')">{{ $t('btnText.resetBtnText') }}</el-button>
                <!-- </el-form-item> -->
                <!-- <el-form-item> -->
                  <!-- 查询 -->
                  <el-button v-permission="{menuCode: menuCode, resourceCode: 'queryBtnText'}" type="primary" @click="onQuery('queryBtnText')" icon="el-icon-search" :loading="loading">
                    {{$t('btnText.queryBtnText')}}
                  </el-button>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!--数据网格-->
      <div class="dataBox" ref="dataBox" >
                <el-table v-if="isInit" ref="singleTable"
                            :data="tableData"
                            :height="tableHeight"
                            @sort-change="sortChange"
                            v-loading="loading" size="mini"
                            style="width: 100%;" stripe=stripe border=border>
                    <el-table-column type="index"  width="50" fixed="left"
                                        :label="$t('table.xh')" align="center">
                    </el-table-column>
                    <el-table-column :label="$t('table.op')" fixed="left" min-width="190">
                        <template slot-scope="scope">
                            <el-button v-permission="{menuCode: menuCode, resourceCode: 'editBtnText'}" size="gv" icon="el-icon-edit" :loading="loading"
                            @click="edit(scope.$index, scope.row,'editBtnText')"
                                        >{{ $t('btnText.editBtnText') }}</el-button>
                            <!--下发-->
                            <el-button size="gv" icon="el-icon-delete"
                                v-permission="{menuCode: menuCode, resourceCode: 'sendBtnText'}"
                                    type="danger" :loading="loading" @click="onSend(scope.$index, scope.row,'sendBtnText')"
                                    :disabled="scope.row.sendtoState!='StayDown'" >{{ $t('ParentAssetIssuance.btnText.sendBtnText') }}</el-button>
                            <!-- 注销 -->
                                <el-button size="gv" icon="el-icon-delete" v-show="scope.row.isEnable=='Available'" v-permission="{menuCode: menuCode,resourceCode: 'passBtnText'}"
                                      type="danger" :loading="loading" @click="logoffRow(scope.$index, scope.row,'passBtnText')"
                                     >{{ $t('btnText.logoffBtnText') }}</el-button>
                                <!-- 恢复 -->
                                <el-button size="gv" icon="el-icon-delete" v-show="scope.row.isEnable==='Invalid'"
                                v-permission="{menuCode: menuCode,resourceCode: 'recoveryBtnText'}"
                                      type="danger" :loading="loading" @click="revertLogoffRow(scope.$index, scope.row,'recoveryBtnText')"
                                     >{{ $t('btnText.recoveryBtnText') }}</el-button>
                            <!-- 删除 -->
                            <el-button size="gv" icon="el-icon-delete" v-show="scope.row.isEnable=='Invalid'"
                            v-permission="{menuCode: menuCode,resourceCode: 'delBtnText'}"
                                  type="danger" :loading="loading" @click="deleteRow(scope.$index, scope.row,'delBtnText')"
                                  >{{ $t('btnText.deleteBtnText') }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="siteName" min-width="110" :label="$t('table.sit.sitName')" sortable="custom" sort-by="siteName">
                    </el-table-column>
                    <el-table-column prop="siteCode" min-width="110" :label="$t('table.sit.sitCode')" sortable="custom" sort-by="siteCode">
                    </el-table-column>
                    <!--下发状态-->
                    <el-table-column prop="sendtoStateName" min-width="110"
                                        :label="$t('ParentAssetIssuance.table.ParentAssetIssuance.status')" sortable="custom" sort-by="sendtoState">
                    </el-table-column>
                    <el-table-column prop="isEnableName" min-width="110" sortable="custom"
                        :label="$t('table.isEnabled')" sort-by="isEnable">
                        </el-table-column>
                    <el-table-column :label="$t('table.lastUpdatedBy')" min-width="120" sortable="custom" prop="modifier" sort-by="modifier">
                    </el-table-column>
                    <el-table-column :label="$t('table.lastUpdateTime')" min-width="180" sortable="custom" prop="lastUpdatedDate" sort-by="lastUpdatedDate">
                    </el-table-column>
                </el-table>
            </div>
    </div>
     <div class="pageBox">
            <el-pagination @size-change="sizeChange"
                            @current-change="currentPageChange"
                            :current-page="pager.curPage"
                            :page-sizes="pager.sizes"
                            :page-size="pager.curSize"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
            </el-pagination>
     </div>

               <!--编辑对话框-->
        <el-dialog :title="$t('label.dialogTitle')" :visible.sync="isShowEditForm" top="5vh" :close-on-click-modal="false">
            <el-form :model="editForm" ref="editForm" size="mini"
                     :label-position="editFormPosition" status-icon=status-icon :rules="editRules">
                <el-form-item :label="$t('editLabel.sit.sitName')" :label-width="editformLabelWidth" prop="siteName">
                    <el-input v-model.trim="editForm.siteName" maxlength="20"
                              :placeholder="$t('editLabel.sit.placeholderSitName')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('editLabel.sit.sitCode')"
                              :label-width="editformLabelWidth" prop="siteCode">
                    <el-input v-model.trim="editForm.siteCode" maxlength="50" :disabled="canEditCode"
                              :placeholder="$t('editLabel.sit.placeholderSitCode')"></el-input>
                </el-form-item>

                <!-- <el-form-item :label="$t('editLabel.sit.operator')" :label-width="editformLabelWidth">
                    <el-select v-model="editForm.operator">
                        <el-option :label="$t('label.move')" value="Move"></el-option>
                        <el-option :label="$t('label.telecom')" value="TelecomN"></el-option>
                        <el-option :label="$t('label.unicom')" value="Unicom"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('editLabel.sit.sitStatus')" :label-width="editformLabelWidth">
                    <el-select v-model="editForm.sitStatus">
                        <el-option :label="$t('label.enable')" value="Enable"></el-option>
                        <el-option :label="$t('label.disabled ')" value="Disabled"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item :label="$t('label.isEnabled')" :label-width="editformLabelWidth">
                    <el-select v-model="editForm.isEnable">
                      <el-option :label="$t('label.all')" value=""></el-option>
                      <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText" v-for="drug in enables"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button size="mini" @click="isShowEditForm = false" :loading="loading">{{ $t('btnText.cancelBtnText') }}</el-button>
                <el-button size="mini" type="primary" @click="submitForm('editForm',currentResCode)" :loading="loading">{{ $t('btnText.saveBtnText') }}</el-button>
            </div>
        </el-dialog>
  </div>
</template>

<script>
import comBaseVue from '../../baseViewModel';
export default {
  mixins: [comBaseVue],
  name:'Sit',
  props: {
    menuCode: String
  },
  data(){
    return {
        isInit:false,
        tableHeight:100,
        appDivStyle:{
            height:this.$store.getters.appHeight,
        },
        enables: [],
        modelName:"com.ispr.iptv.entity.sys.Site",
        formQueryCondition: {
          siteName:{
            key:'siteName',
            val:'',
            op:'LIKE' //操作符
          },
          siteCode:{
            key:'siteCode',
            val:'',//查询的值
            op:'LIKE' //操作符
          },
          isEnable: {
              key: 'isEnable',
              op: '=', // 操作符
              val: ''
          },
        },
         // 编辑面板绑定的对象
        editForm: {
            keyId: 0,
            version: 0,
            siteCode: "",
            siteName: "",
            //operator: "",
            //sitStatus: "Enable"
            sendtoState: "StayDown",
            isEnable: "Available"
        },
        // 编辑面板的验证规则
        editRules: {
            siteCode: [{ required: true, message: this.$i18n.t('rules.sit.sitCode'), trigger: 'blur' }],
            siteName: [{ required: true, message: this.$i18n.t('rules.sit.sitName'), trigger: 'blur' }],
            //operator: [{ required: true, message: this.$i18n.t('rules.sit.operator'), trigger: 'blur' }],
        },
        sendType:"",
    }

  },
  methods:{
    onReset:function(){
        if (this.$refs['form']) {
            this.$refs['form'].resetFields();
        }
        this.formQueryCondition.siteName.val = "";
        this.formQueryCondition.siteCode.val = "";
        this.formQueryCondition.isEnable.val = "Available";
    },
    // 新增
    onNew: function(rescode) {
        this.currentResCode = (rescode && rescode!=='') ? rescode : '';
        this.isShowEditForm = true;
        if (this.$refs['editForm']) {
            this.$refs['editForm'].resetFields();
        }
        this.editForm.keyId = "";
        this.editForm.version = "";
        this.editForm.siteCode = "";
        this.editForm.siteName = "";
        //this.editForm.operator = "";
        //this.editForm.sitStatus = "启用";
        this.editForm.sendtoState = "StayDown";
        this.editForm.isEnable = "Available";
        this.curCommand = "SaveNewReturnPK";
        this.canEditCode = false;
    },
    // 编辑按钮回调事件
    editCallback: function(isSuccess,json) {
        if(isSuccess){
            this.curCommand = "PartialUpdateProc";
            this.isShowEditForm = true;
            if (this.$refs['editForm']) {
                this.$refs['editForm'].resetFields();
            }
            this.editForm.keyId = json.keyId;
            this.editForm.version = json.version;
            this.editForm.siteCode = json.siteCode;
            this.editForm.siteName = json.siteName;
            this.editForm.sendtoState = "StayDown";
            // this.editForm.operator = json.operator;
            // this.editForm.sitStatus = json.sitStatus;
            this.editForm.isEnable = json.isEnable;
            this.canEditCode = true;
        }
        else{
            this.$message({
                message: json.msg,
                type: 'warning'
                });
        }
    },
    //下发
    onSend:function(index, row, rescode){
      this.currentResCode = (rescode && rescode !== '') ? rescode : '';
      var _this = this;
      this.$confirm(this.$i18n.t("message.confirmSendMessage"),
          this.$i18n.t("message.confirmTitle"), {
          confirmButtonText: this.$i18n.t("message.yes"),
          cancelButtonText: this.$i18n.t("message.cancel"),
          type: "warning",
          callback: function (action, instance) {
              if (action == "confirm") {
                _this.sendType = "single";//单条下发
                _this.singleSend = {};
                let dataList = [];//最终传给后台的总数据
                let keyId = row.keyId;
                let version = row.version;
                let resType = "SITE";
                let state = "Untreated";
                let data = {"keyId":keyId,"version":version,"resType":resType,"state":state};
                _this.singleSend = data;
                dataList.push(_this.singleSend);
                _this.loading = true;
                _this.procCommand("MediaSendToProc",
                _this.modelName,
                "Default",
                {
                    "dataList":dataList,
                },
                null,
                _this.submitFormCallback);

              }

          }
      });

    },
    // 注销按钮
        logoffRow: function(index, row, rescode) {
            this.currentResCode = (rescode && rescode!=='') ? rescode : '';
            var _this = this;
            this.$confirm(this.$i18n.t("message.confirmlogoffMessage"),
                this.$i18n.t("message.confirmTitle"), {
                confirmButtonText: this.$i18n.t("message.yes"),
                cancelButtonText: this.$i18n.t("message.cancel"),
                type: "warning",
                callback: function (action, instance) {
                    if (action == "confirm") {
                        var commandBody = {  "keyId": row.keyId, "version": row.version, isEnable: "Invalid", sendtoState:"StayDown" };
                        _this.loading = true;
                        _this.procCommand("PassProc",//PartialUpdateProc
                                _this.modelName,
                                "N",
                                commandBody,
                                null,
                                _this.submitFormCallback);
                    }
                    
                }
            });
        },
        // 恢复注销按钮
        revertLogoffRow: function(index, row, rescode) {
            this.currentResCode = (rescode && rescode!=='') ? rescode : '';
            var _this = this;
            this.$confirm(this.$i18n.t("message.confirmNormalMessage"),
                this.$i18n.t("message.confirmTitle"), {
                confirmButtonText: this.$i18n.t("message.yes"),
                cancelButtonText: this.$i18n.t("message.cancel"),
                type: "warning",
                callback: function (action, instance) {
                    if (action == "confirm") {
                        var commandBody = {  "keyId": row.keyId, "version": row.version, isEnable: "Available", sendtoState:"StayDown" };
                        _this.loading = true;
                        _this.procCommand("RecoveryProc",//PartialUpdateProc
                                _this.modelName,
                                "N",
                                commandBody,
                                null,
                                _this.submitFormCallback);
                    }
                    
                }
            });
        },

    // 为状态下拉框赋值
    findEnables: function() {
        this.findByTypeCode("10001",this.setEnables)
    },
    // 查询状态下拉框数据成功后的回调
    setEnables: function(isSuccess,json) {
        try{
            if (isSuccess) {
                this.enables = [];
                for (var i = 0; i < json.data.length; i++) {
                    this.enables.push(json.data[i]);
                }
            }
            else {
                this.$message.error(json.msg);
            }
        }
        catch(e){
            alert(e);
        }
    },

    initTable:function(){
        this.tableHeight = this.$refs.context.offsetHeight - this.$refs.queryBox.offsetHeight;
        this.isInit = true;
    },
    enterDown(){
      var g = this
      if(g.isShowEditForm){
        g.submitForm('editForm',g.currentResCode)
      }else if(!g.loading){
        g.onQuery()
      }
    }
  },
   mounted: function mounted() {
    this.formQueryCondition.isEnable.val = "Available";
    this.findEnables();
    this.onQuery();
    window.setTimeout(this.initTable,100);

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>


